ifUser();
var oId = getURLParameter('oId');

var OrderHeader = React.createClass({
    handleMyClick: function(){
        location.href = 'orderList.html';
    },
    render: function(){
        return (
            <header data-am-widget="header" className="am-header am-header-default am-header-fixed">
                <div className="am-header-left am-header-nav">
                    <a onClick={this.handleMyClick} className="widht-10s"><i className="icon_8"></i></a>
                </div>
                <h1 className="am-header-title">订单详情</h1>
                <div className="am-header-right am-header-nav am-dropdown" id="am-dropdown">
                    <a></a>
                    <div className="am-dropdown-toggle icontopmore" id="am-dropdown-toggle"></div>
                    <ul className="am-dropdown-content">
                        <li className="padding-left-20"><a href="index.html" className="font-color-45 prelative">首页</a></li>
                        <li className="am-divider"></li>
                        <li className="padding-left-20"><a href="personal.html" className="font-color-45 prelative">个人中心</a></li>
                    </ul>
                </div>
            </header>
        )
    }
});

var GoodItem = React.createClass({
    render: function(){
        var offer = this.props.offer,specs = offer.specs,specsArr = [], count = 0;
        specs.forEach(function(value){
            specsArr.push(<div>{value.colorDesc}，{value.lengthDesc}码，{value.number}双；</div>);
            count += parseInt(value.number);
        });
        return (
            <div className="gooditem am-padding-left-sm am-padding-right-sm border-bottom box am-padding-top-sm am-padding-bottom-sm prelative">
                <div><img src={IMG_PRE+offer.imgUrl} className="width-100px"/></div>
                <div className="box-1 am-margin-left-sm am-margin-top-xs">
                    <div className="box">
                        <div className="box-1 am-text-truncate">{offer.offerName}</div>
                        <div className="font-color-1 font-14">x{offer.number}</div>
                    </div>
                    <div className="box font-14 font-color-1">
                        <div>已选:</div>
                        <div className="box-1">
                            {specsArr}
                        </div>
                    </div>
                    <div className="font-color-main">¥{parseFloat(offer.offer_price*count).toFixed(2)}</div>
                </div>
            </div>
        )
    }
});

var OrderMain = React.createClass({
    render: function(){
        var order = this.props.order, offers = order.offers, offersArr = [], price = 0;
        if(offers){
            offers.forEach(function(value){
                offersArr.push(<GoodItem offer={value} />);
                price += parseFloat(value.offer_price*value.number);
            });
        }
        return (
            <div className="am-g am-text-sm am-padding-bottom-sm font-15">
                <div className="bg-white border-bottom">
                    <div data-am-widget="titlebar" className="am-titlebar am-titlebar-default box prelative am-no-layout">
                        <i className="bgmainblock"></i>
                        <h2 className="am-titlebar-title am-text-truncate box-1">物流单号：{order.wuliuType} {order.wuliuNbr}</h2>
                        {/*<span className="am-margin-right-sm order-btn-3">复制</span>*/}
                    </div>
                </div>
                <div className="bg-white font-14 am-padding-sm prelative">
                    <div className="box">
                        <div>联系人：{order.addressObj ? order.addressObj.reciver_name : ''}（{order.addressObj ? order.addressObj.phone : ''}）</div>
                    </div>
                    <div className="box am-margin-top-xs">
                        <div className="shouye_100 am-margin-right-xs"></div>
                        <div>地址：{order.addressObj ? order.addressObj.location : ''}</div>
                    </div>
                </div>
                <div className="am-margin-top-sm bg-white border-bottom">
                    <div data-am-widget="titlebar" className="am-titlebar am-titlebar-default box prelative am-no-layout">
                        <i className="bgmainblock"></i>
                        <h2 className="am-titlebar-title am-text-truncate box-1">订单号：{order.orderNbr}</h2>
                        {/*<span className="am-margin-right-sm order-btn-3">复制</span>*/}
                    </div>
                </div>
                <div className="goodlist bg-white">
                    {offersArr}
                </div>
                <div className="am-u-sm-12 bg-white am-padding-bottom-ss am-margin-top-xs border-tops am-padding-top-sm font-14">
                    <div className="box">
                        <div className="">商品：</div>
                        <div className="box-1 am-text-right"><span className="font-color-1">+¥{price.toFixed(2)}</span></div>
                    </div>
                    <div className="box">
                        <div className="">运费：</div>
                        <div className="box-1 am-text-right"><span className="font-color-1">+¥{order.freight ? parseFloat(order.freight).toFixed(2) : 0.00}</span></div>
                    </div>
                    <div className="box">
                        <div className="">优惠{order.discountDesc == null ? '' : '（'+order.discountDesc+'）'}：</div>
                        <div className="box-1 am-text-right"><span className="font-color-1">-¥{order.discount ? parseFloat(order.discount).toFixed(2) : 0.00}</span></div>
                    </div>
                    <div className="box">
                        <div className="">应付：</div>
                        <div className="box-1 am-text-right"><span className="font-color-monney">+¥{order.orderFee ? parseFloat(order.orderFee).toFixed(2) : 0.00}</span></div>
                    </div>
                </div>
                <div className="am-u-sm-12 am-margin-top-xs bg-white am-padding-bottom-ss am-margin-top-xs border-tops am-padding-top-sm font-14">
                    <div className="box">
                        <div className="">订单状态：</div>
                        <div className="box-1 am-text-right"><span className="font-color-monney">{order.status ? order.status : ''}</span></div>
                    </div>
                    <div className="box">
                        <div className="">下单时间：</div>
                        <div className="box-1 am-text-right"><span className="font-color-1">{order.createTime ? order.createTime : ''}</span></div>
                    </div>
                    {order.send_time == null ? '' :
                         <div className="box">
                             <div>发货时间：</div>
                             <div className="box-1 am-text-right"><span className="font-color-1">{order.send_time}</span></div>
                         </div>}
                </div>
            </div>
        )
    }
});

var OrderFooter = React.createClass({
    handlePayClick: function(){
        location.href = 'pay.html?oId='+oId;
    },
    handleReceiveClick: function(e){
        this.props.showDialog('确认收货？');
        e.stopPropagation();
        e.preventDefault();
    },
    handleDefClick: function(e){
        e.stopPropagation();
        e.preventDefault();
    },
    render: function(){
        //1待付款 2待发货 3待收货 4完成 0取消  -1删除
        var status = '',handleClick = this.handleDefClick;
        switch(parseInt(this.props.order.statusInt)){
            case 1: status = '去支付'; handleClick = this.handlePayClick; break;
            case 2: status = '待发货'; break;
            case 3: status = '确认收货';handleClick = this.handleReceiveClick; break;
            case 4: status = '订单已完成'; break;
            default: break;
        }
        return (
            <footer data-am-widget="navbar" className="am-navbar am-cf am-navbar-default am-no-layout">
                <ul className="am-navbar-nav am-cf am-avg-sm-4 am-padding-left-0 am-padding-right-0 ">
                    <li><a className="bg-2 font-color-white font-15 line-51" onClick={handleClick}>{status}</a></li>
                </ul>
            </footer>
        )
    }
});

var Page = React.createClass({
    getInitialState: function() {
        return{
            dialogHidden: true,
            dialogMsg: '',
            status: '',
            order: {}
        }
    },
    componentWillMount: function(){
        this.getOrderDetail();
    },
    showDialog: function(msg){
        this.setState({
            dialogHidden: false,
            dialogMsg: msg
        });
    },
    closeDialog: function(){
        this.setState({
            dialogHidden: true
        });
    },
    getOrderDetail: function() {
        $.ajax(
            getAjaxOps('/order/qryOrderDetail', {
                orderId: oId
            })
        ).done(function (res) {
                if(res.resultCode == 0){
                    this.setState({
                        order: res.data
                    })
                }
            }.bind(this));
    },
    receive: function(){
        $.ajax(
            getAjaxOps('/order/updateStatus', {
                orderId: oId,
                status: 4
            })
        ).done(function (res) {
                if(res.resultCode == 0){
                    // this.getOrderDetail();
                    location.href = 'orderList.html';
                }
            }.bind(this));
    },
    render: function() {
        return (
            <div>
                <OrderHeader/>
                <section id="amz-main" data-tag="css-nav">
                    <OrderMain order={this.state.order} />
                </section>
                <OrderFooter order={this.state.order} showDialog={this.showDialog}/>
                <Dialog hidden={this.state.dialogHidden} msg={this.state.dialogMsg} on={this.receive} close={this.closeDialog}/>
            </div>
        )
    }
});

ReactDOM.render(
    <Page />,
    document.getElementById('root')
);
